<!--  -->
<template>
    <div class="order_Detail">
        <div class="h50">
            <my-tab-bar
                title="订单详情"
                left-arrow
                @click-left="onClickLeft"
            >
            </my-tab-bar>
        </div>
        <div class="order_status">
            <div class="status-item">
            <label>订单状态：</label>
            <span>{{ detail.orderStatusString }}</span>
          </div>
          <div class="status-item">
            <label>订单编号：</label>
            <span>{{ detail.orderNo }}</span>
          </div>
          <div class="status-item">
            <label>下单时间：</label>
            <span>{{ detail.createTime }}</span>
          </div>
          <!-- <van-button v-if="[1,2,3].includes(detail.orderStatus)" style="margin-bottom: 10px" color="#1baeae" block @click="confirmOrder(detail.orderNo)">确认订单</van-button> -->
            <van-button v-if="detail.orderStatus == 0" style="margin-bottom: 10px" color="#1baeae" block @click="showPayFn">去支付</van-button>
            <van-button v-if="!(detail.orderStatus < 0 || detail.orderStatus == 4)" block @click="cancelOrder(detail.orderNo)">取消订单</van-button>
        </div>
        <div class="order-price">
            <div class="price-item">
                <label >商品金额：</label>
                <span>￥{{detail.totalPrice}}</span>
            </div>
            <div class="price-item">
                <label >配送方式：</label>
                <span>普通快递</span>
            </div>
        </div>
        <van-card
            v-for="item in detail.newBeeMallOrderItemVOS"
            :key="item.goodsId"
            style="background: #fff"
            :num="item.goodsCount"
            :price="item.sellingPrice"
            desc="全场包邮"
            :title="item.goodsName"
            :thumb="item.goodsCoverImg"
            />

            <van-action-sheet
            v-model="show"
            :actions="actions"
            @select="onSelect"
            />
    </div>
        
</template>

<script>
    import {
        getOrderDetail,
        cancelOrder,
        makeSureOrder,
        paySuccess,
    } from '@/api/index';
    import {
        Dialog,
        Toast
    } from "vant";
    export default {
        data() {
            return {
                detail: {},
                show: false,
                actions: [{
                    id: 0,
                    name: "支付宝"
                }, {
                    id: 1,
                    name: "微信"
                }, ]
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            async init() {
                Toast.loading({
                    message: '加载中...',
                    forbidClick: true
                });
                const orderId = this.$route.params.orderId
                await getOrderDetail(orderId).then((data) => {
                    console.log(data)
                    this.detail = data.data;
                    Toast.clear();
                })

            },

            onClickLeft() {
                this.$router.back()
            },
            cancelOrder(id) {
                Dialog.confirm({
                    title: '确认删除订单？'
                }).then(() => {
                    cancelOrder(id).then(data => {
                        if (data.resultCode == 200) {
                            Toast('删除成功')
                            this.init()
                        }
                    }).catch(() => {

                    })
                })
            },
            showPayFn() {
                this.show = true;
            },
            onSelect(item) {
                this.show = false;
                Toast.loading({
                    forbidClick: true
                })
                makeSureOrder({
                    addressId: this.$route.query.addressId,
                    cartItemIds: this.cartItemIds.split(',')
                }).then((data) => {
                    Toast.clear();
                    paySuccess({
                        orderNo: data.data,
                        payType: item.id,
                    }).then(() => {
                        this.$router.push('/order')
                    })
                })
            }


        }
    }
</script>
<style lang='less' scoped>
    .order_Detail {
        background: #f7f7f7;
        text-align: left;
        .order-status {
            background: #fff;
            margin-top: 44px;
            padding: 20px;
            font-size: 15px;
            .status-item {
                margin-bottom: 10px;
                label {
                    color: #999;
                }
                span {}
            }
        }
        .order-price {
            background: #fff;
            margin: 20px 0;
            padding: 20px;
            font-size: 15px;
            .price-item {
                margin-bottom: 10px;
                label {
                    color: #999;
                }
                span {}
            }
        }
        .van-card {
            margin-top: 0;
        }
        .van-card__content {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }
</style>